import { useState } from "react";
import "./index.scss";
import { View, Image, Button, Input } from "@tarojs/components";
import { AtButton, AtForm, AtInput } from "taro-ui";
import Taro, { useLoad } from "@tarojs/taro";
import { useUserInfo } from "@/hooks/useUserInfo";
import { requestUploadFile } from "@/utils/common";

import "taro-ui/dist/style/components/button.scss";

interface EditUserInfo {
  nickName: string;
  avatarUrl: string;

}
function EditUserInfo() {
  const { userInfo, updateUserInfoFn }: any = useUserInfo();
  const [editUserInfo, setEditUserInfo] = useState<EditUserInfo>({
    nickName: '',
    avatarUrl: '', 
  })

  // const chooseImage = () => {
  //   Taro.chooseImage({
  //     count: 1,
  //     sizeType: ['compressed'],
  //     sourceType: ['album', 'camera'],
  //     success: async (res) => {
  //       setEditUserInfo(prev => ({ ...prev, avatarUrl: res.tempFilePaths[0] }));
  //       // 上传图片到服务器
  //       let result = await requestUploadFile(res.tempFilePaths[0]);
  //       console.log(result, 'result');
  //     }
  //   });
  // };


  const onChooseAvatar = async (e: any) => {
    const { avatarUrl } = e.detail;
    setEditUserInfo(prev => ({...prev, avatarUrl }));
    // 上传图片到服务器
    let avatarName = userInfo.pid ? `${userInfo.pid}_avatar.png` : "avatar.png"
    let result: any = await requestUploadFile(avatarUrl, avatarName);
    setEditUserInfo(prev => ({...prev, avatarUrl: result.data }));
  };

  const handleInputChange = (e: any) => {
    const { value } = e.detail;
    setEditUserInfo(prev => ({...prev, nickName: value }));    
  };

  const handleSubmit = async () => {
    const { nickName, avatarUrl } = editUserInfo;
    
    // 表单验证
    if (!nickName) {
      Taro.showToast({ title: '请输入昵称', icon: 'none' });
      return;
    }
    console.log(editUserInfo, 'editUserInfo');
    await updateUserInfoFn({
      nickName,
      avatarUrl,
    });
    Taro.reLaunch({
      url: '/homeIndex/pages/home/index', 
    })
  };

  useLoad(() => {
    setEditUserInfo({
      nickName: userInfo.nickName,
      avatarUrl: userInfo.avatarUrl,
    })
  })
  
  return (
    <View className='pet-edit-container'>
      <View className='avatar-section'>
        {/* <Text className='page-title'>编辑宠物</Text> */}
        <View className='avatar-wrapper flex-c-c-c'>
          <Image 
            src={editUserInfo.avatarUrl} 
            mode='aspectFill'
          />
        </View>
        <Button
          className='upload-btn'
          openType='chooseAvatar'
          onChooseAvatar={onChooseAvatar}
        >
          上传头像
        </Button>
      </View>
      <AtForm className="form-box">
        <View className='form-item'>
          <View className='form-label'>昵称</View>
          <View className='form-input-wrapper'>
            <Input
              name='petName'
              type='nickname'
              placeholder='请输入您的昵称'
              value={editUserInfo.nickName}
              onInput={handleInputChange}
              className='form-input'
            />
          </View>
        </View>
        <View className='footer-bar'>
          <View 
            className='submit-btn'
            onClick={handleSubmit}
          >
            保存
          </View>
        </View>
      </AtForm>
    </View>
  )
}

export default EditUserInfo;